<template>
	<view>
		<!-- 搜索框 -->
		<view class="search-input"><input class="uni-input" v-model="topicName" placeholder-class="icon iconfont icon-icon- topic-search" @input="loadTopic" placeholder="搜索热门话题" /></view>
		
		<view class="topic-list">
			
			<block v-for="(topic,index) in topicInfo" :key="index">
				<view class="topic-list-item" @tap="toPage(topic)">
					<view class="topic-info">
						<view class="topic-img">
							<image-cache :imgSrc="topic.topicPic" mode="widthFix"></image-cache>
						</view>
						<view class="topic-msg">
							<text class="topic-tag">#{{topic.topicName}}</text>
							<view class="">{{topic.topicNum}}人发表</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
import imageCache from '../../components/image-cache/image-cache.vue';
export default {
	components:{
		imageCache
	},
	data() {
		return {
			pageType: 0,
			topicName:'',
			task:false,
			topicInfo: [
			],
		};
	},
	methods: {
		...mapMutations(['setSelectTopic']),
		toPage(topic){
			this.setSelectTopic(topic);
			switch(this.pageType){
				case 1:
					uni.navigateTo({
						url:`../topic-type-list/topic-type-list`
					});
					break;
				case 2:
					uni.navigateTo({
						url:`../add-trend/add-trend?task=${this.task}`
					});
					break;
				default:
					break;
			}
		},
		loadTopic(){
			let url = `${constant.baseHttpUri}${this.pageType===2? constant.pathUri.topicInfo:constant.pathUri.hotTalk}`;
			uni.request({
			    url: url,
			    header: constant.authHead(),
				data: {
					"talkName":this.topicName
				},
				method: 'GET',
			    success: res => {
					if(res.data.code === constant.dataCode.OK ){
						this.topicInfo=res.data.data;
					}else{
						showToast(res.data.msg);
					}
			    },fail:r=>{
					console.log(r);
				}
			});
		},
	},
	onLoad(options) {
		this.pageType = parseInt(options.type);
		this.task= options.task||false;
		this.loadTopic();
	},
	onReady() {
		switch (this.pageType) {
			case 1:
				uni.setNavigationBarTitle({
					title: '热门话题'
				});
				break;
			case 2:
				uni.setNavigationBarTitle({
					title: '选择话题'
				});
				break;
			default:
				break;
		}
	}
};
</script>

<style lang="less" scoped>
.search-input {
	.icon-icon-:before{
		font-size: 34rpx;
	}
	.topic-search {
		text-align: center;
		font-size: 28rpx;
	}
	input {
		margin: 20rpx 40rpx;
		border-radius: 20rpx;
		background-color: #f4f4f4;
		text-align: center;
	}
}

.topic-list{
	margin-top:35rpx;
	padding: 0 40rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: center;
	
	.topic-list-item{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0 20rpx 10rpx;
				
		.topic-info{
			display: flex;
			flex-direction: row;
		}
		
		.topic-img{
			width: 170rpx;
			height: 170rpx;
			margin-right: 20rpx;
			image{
				width: 100%;
				border-radius: 20rpx;
			}
		}
		.topic-msg{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 140rpx;
			.topic-tag{
				font-size: 30rpx;
				font-weight: 600;
			}
			&>view:last-child{
				font-size: 24rpx;
				color: #CDCDCD;
			}
		}
	}
}
</style>
